import React, { PureComponent } from "react"
import { Button } from "antd-mobile"
import { isNull, filterTemplate } from "../../utils/helper"
import getDataSource from "../MDatasource"

export default class MiGauge extends PureComponent {
	constructor(props) {
		super(props)
		this.chart = null;
		this.timer = null;
		this.canvasId = Math.random() + new Date().getTime()+""
		this.state = {

		}
	}

	componentWillReceiveProps(next) {
		let { list: list1 = [] } = this.props;
		let { list: list2 = [], chart_config: { series } } = next;
		if (!_.isEqual(list1, list2)) {
			series[0].data[0].value = list2.value
			this.chart.setOption({ series })
		}
	}
	setTitle = () => {
		let { chart_config: { title } } = this.props;
		if (!isNull(title)) {
			return <div style={{ textAlign: "center", width: "100%", paddingTop: "5px" }} dangerouslySetInnerHTML={{ __html: title }}></div>;
		}
	}
	componentDidMount() {
		// 基于准备好的dom，初始化echarts实例
		let {  chart_config: { series,height }, dataset_key } = this.props;
		height =  height ? height : window.innerWidth > window.innerHeight ? window.innerHeight - 54 : window.innerWidth * 0.618;
		this.chart = echarts.init(document.getElementById(this.canvasId), "", { devicePixelRatio: window.devicePixelRatio ,height});
		// 绘制图表
		this.chart.setOption({
			series
		});
	}
	render() {
		let {chart_config:{height}}=this.props;
		let width = window.innerWidth;
		height =  height ? height : window.innerWidth > window.innerHeight ? window.innerHeight - 54 : window.innerWidth * 0.618;
		return (
			<div>
				{this.setTitle()}
				<div className="chart-wrapper" >
					<canvas id={this.canvasId} style={{ width: width, height: height }} />
				</div>
			</div>
		)
	}

	componentWillUnmount() {
		clearInterval(this.timer)
	}
}